* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.block {
    display: block;
}

.hidden {
    display: none;
}

.hideText {
    font-size: 0;
}

.centerText {
    text-align: center;
}

html, body {
    height: 100%;
}

body {
    background: rgb(54, 54, 54);
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-family: 'Quantico', sans-serif;
    text-shadow: rgb(100, 100, 100) 1px 1px 0;
}

.pageHeader {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 40px;
    border-top: 1px solid rgb(122, 122, 122);
    background: rgb(167,167,167); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(167,167,167,1) 0%, rgba(137,137,137,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,167,167,1)), color-stop(100%,rgba(137,137,137,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(167,167,167,1) 0%,rgba(137,137,137,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(167,167,167,1) 0%,rgba(137,137,137,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(167,167,167,1) 0%,rgba(137,137,137,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(167,167,167,1) 0%,rgba(137,137,137,1) 100%); /* W3C */
    box-shadow: 0 2px 8px rgb(30, 30, 30);
}

.pageHeader h1 {
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 1.6em;
    line-height: 40px;
}

.panel {
    position: fixed;
    border: 1px solid rgb(27, 27, 27);
    background: rgb(235, 235, 235);
}

.panel h1 {
    padding-left: 4px;
    height: 20px;
    font-size: 0.8em;
    line-height: 1.2;
    border-top: 1px solid rgb(159, 159, 159);
    border-bottom: 1px solid rgb(70, 70, 70);
    color: rgb(255, 255, 255);
    background: rgb(141,141,141); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(141,141,141,1) 0%, rgba(107,107,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(141,141,141,1)), color-stop(100%,rgba(107,107,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(141,141,141,1) 0%,rgba(107,107,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(141,141,141,1) 0%,rgba(107,107,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(141,141,141,1) 0%,rgba(107,107,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(141,141,141,1) 0%,rgba(107,107,107,1) 100%); /* W3C */
}

.mainTools {
    z-index: 2000;
    top: 40px;
    right: 0;
    width: 56px;
}

.mainTools .tool {
    cursor: pointer;
    margin: 2px auto;
    width: 50px;
    height: 55px;
}

.mainTools .tool.selected {
    background: url(../images/tools_selected_bg.png) no-repeat 0 0;
    background-size: 100%;
}

.magicWandTool { background: url(../images/magic_wand_100.png) no-repeat 0 0; }
.pathSelectionTool { background: url(../images/black_arrow_100.png) no-repeat 0 0; }
.penTool { background: url(../images/pen_100.png) no-repeat 0 0; }
.zoomTool { background: url(../images/zoom_100.png) no-repeat 0 0; }
.magicWandTool, .pathSelectionTool, .penTool, .zoomTool {
    background-size: 100%;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.toolOptions {
    z-index: 2000;
    top: 40px;
    right: 55px;
    width: 200px;
}

.toolOptions .option {
    padding: 4px;
    font-size: 0.9em;
    line-height: 1.2;
}

.pasteBoard {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
}

#artCanvas {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -200px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;

    image-rendering: optimizeSpeed;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

#selectionCanvas {
    position: absolute;
    z-index: 200;
}

#penCanvas {
    position: absolute;
    z-index: 300;
    top: 0;
    left: 0;
}